<template>
  <div>
    <el-form :model="form" label-width="auto" style="max-width: 600px; display: flex; flex-wrap: nowrap;">
      <el-form-item label="退款编号:" style="width: 200px">
        <el-input v-model="form.id" />
      </el-form-item>
      <el-form-item label="申请人:" style="width: 200px">
        <el-input v-model="form.contactsName" />
      </el-form-item>
      <el-button @click="findList()" type="primary">查询</el-button>
      <el-button @click="cleanForm()" type="primary">清空</el-button>
    </el-form>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="订单编号"/>
    <el-table-column prop="totalAmount" label="订单金额"/>
    <el-table-column prop="realPayAmount" label="实付金额"/>
    <el-table-column prop="contactsName" label="申请人"/>
    <el-table-column prop="serveStartTime" label="申请时间"/>
    <el-table-column prop="ordersStatus" label="订单状态">
      <template #default="scope">
        <el-tag v-if="scope.row.ordersStatus==0" >待支付</el-tag>
        <el-tag v-if="scope.row.ordersStatus==100" >派单中</el-tag>
        <el-tag v-if="scope.row.ordersStatus==200" >待服务</el-tag>
        <el-tag v-if="scope.row.ordersStatus==300" >服务中</el-tag>
        <el-tag v-if="scope.row.ordersStatus==500" >订单完成</el-tag>
        <el-tag v-if="scope.row.ordersStatus==600" >已取消</el-tag>
        <el-tag v-if="scope.row.ordersStatus==700" >已关闭</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="refundStatus" label="退款状态">
      <template #default="scope">
        <el-tag v-if="scope.row.refundStatus==1" >退款中</el-tag>
        <el-tag v-if="scope.row.refundStatus==2" >退款成功</el-tag>
        <el-tag v-if="scope.row.refundStatus==3" >退款失败</el-tag>
      </template>
    </el-table-column>
  </el-table>
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="form.pageNum"
      v-model:page-size="form.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {findByStatus} from "@/api/order";
const tableData =ref([])
const form =ref({
  pageNum:1,
  pageSize:10
})
const total=ref()
function findList(){
  findByStatus(form.value).then(arr =>{
    total.value=arr.data.data.total
    tableData.value=arr.data.data.records
  })
}
findList()
const handleSizeChange = (val) => {
  form.pageSize=val
  findList()
}
const handleCurrentChange = (val) => {
  form.pageNum=val
  findList()
}
function cleanForm(){
  form.value.id=null
  form.value.contactsName=null
}
</script>
